<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/boot.js"></script>
    <style>
        .console-container {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .console-item {
            height: 222px;
            width: calc(25% - 40px);
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .console-item2 {
            height: 222px;
            width: calc(50% - 40px);
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .console-item4 {
            height: 270px;
            width: calc(100% - 40px);
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .console-item-head {
            background-color: #16baaa;
            color: white;
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .console-item-head-title {
            margin-left: 15px;
            font-weight: bold;
            font-size: 15px;
        }

        .console-item-head-op {
            margin-right: 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .console-item-content {
            display: flex;
            flex-direction: column;
            border-left: #e2e2e2 1px solid;
            border-right: #e2e2e2 1px solid;
            height: 100%;
            border-bottom: #e2e2e2 1px solid;
        }

        .console-item-content-item {
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            border-bottom: #e2e2e2 1px solid;
        }

        .console-item-content-item span {
            margin-left: 5px;
        }
    </style>
</head>

<body style="background-color: white;">
    <div class="console-container">
        <div class="console-item">
            <div class="console-item-head">
                <span class="console-item-head-title">待办事项</span>
                <div class="console-item-head-op">
                    <span>查看全部</span>
                </div>
            </div>
            <div class="console-item-content">
                <div class="console-item-content-item">
                    <span>【审批】您有xxx提交的发票报销待审批</span>
                    <span style="margin-right: 10px;">2023-04-28 </span>
                </div>
                <div class="console-item-content-item">
                    <span>【通知】您提交的请假审批已通过</span>
                    <span style="margin-right: 10px;">2023-04-26 </span>
                </div>
                <div class="console-item-content-item">
                    <span>【申请】xxxxx项目2023年4月绩效计提待提交</span>
                    <span style="margin-right: 10px;">2023-04-26 </span>
                </div>
                <div class="console-item-content-item">
                    <span>【预警】【xxxx项目】结算审核金额异常</span>
                    <span style="margin-right: 10px;">2023-04-20 </span>
                </div>
                <div class="console-item-content-item" style="border-bottom: none;">
                    <span>【提醒】您的xxxx待办已超时3日，请尽快处理</span>
                    <span style="margin-right: 10px;">2022-03-19 </span>
                </div>
            </div>
        </div>
        <div class="console-item">
            <div class="console-item-head">
                <span class="console-item-head-title">通知公告</span>
                <div class="console-item-head-op">
                    <span>发布公告</span>
                    <span style="margin-left: 10px;">历史记录</span>
                </div>
            </div>
            <div class="console-item-content">
                <div class="console-item-content-item">
                    <span>关于2023年五一劳动节放假的通知</span>
                    <span style="margin-right: 10px;">2023-04-25 </span>
                </div>
                <div class="console-item-content-item">
                    <span>关于鼓励员工积极参与荣誉评选的通知</span>
                    <span style="margin-right: 10px;">2023-04-22 </span>
                </div>
                <div class="console-item-content-item">
                    <span>关于发布会议接待新规定的通知</span>
                    <span style="margin-right: 10px;">2023-04-18 </span>
                </div>
                <div class="console-item-content-item">
                    <span>关于落实疫情防控办公的通知</span>
                    <span style="margin-right: 10px;">2023-01-01 </span>
                </div>
                <div class="console-item-content-item" style="border-bottom: none;">
                    <span>关于张三同志人事任命的通知</span>
                    <span style="margin-right: 10px;">2022-11-14 </span>
                </div>
            </div>
        </div>
        <div class="console-item">
            <div class="console-item-head">
                <span class="console-item-head-title">交流协作</span>
                <div class="console-item-head-op">
                    <span>发起协作</span>
                    <span style="margin-left: 10px;">收藏</span>
                    <span style="margin-left: 10px;">更多</span>
                </div>
            </div>
            <div class="console-item-content">
                <div class="console-item-content-item">
                    <span>关于xxx项目维护增补合同的沟通</span>
                    <span style="margin-right: 10px;">2023-05-30 </span>
                </div>
                <div class="console-item-content-item">
                    <span>关于xxxx项目投标事宜沟通</span>
                    <span style="margin-right: 10px;">2023-05-26 </span>
                </div>
                <div class="console-item-content-item">
                    <span>关于2023年社保基数调整的通知</span>
                    <span style="margin-right: 10px;">2023-05-12 </span>
                </div>
                <div class="console-item-content-item">
                    <span>关于征询意见的交流</span>
                    <span style="margin-right: 10px;">2023-05-09 </span>
                </div>
                <div class="console-item-content-item" style="border-bottom: none;">
                    <span>关于员工佩戴工牌的管理规定</span>
                    <span style="margin-right: 10px;">2023-04-29 </span>
                </div>
            </div>
        </div>
        <div class="console-item">
            <div class="console-item-head">
                <span class="console-item-head-title">公司动态</span>
                <div class="console-item-head-op">
                    <span>发布动态</span>
                    <span style="margin-left: 10px;">更多</span>
                </div>
            </div>
            <div class="console-item-content">
                <div class="console-item-content-item">
                    <span>喜报！热烈祝贺我司获评2023年第一季度履约评价优良单位</span>
                </div>
                <div class="console-item-content-item">
                    <span>喜报！热烈祝贺我司获评2022年度xxx纳税优质企业</span>
                </div>
                <div class="console-item-content-item">
                    <span>xxx省xxx县xxx局领导莅临我司深入考察</span>
                </div>
                <div class="console-item-content-item">
                    <span>喜报！xxx再获《高新技术企业证书》</span>
                </div>
                <div class="console-item-content-item" style="border-bottom: none;">
                    <span>喜讯！xxxx获得CMMI3级资质证书 研发能力获国际认可</span>
                </div>
            </div>
        </div>
        <div class="console-item2">
            <div class="console-item-head">
                <span class="console-item-head-title">培训考试</span>
                <div class="console-item-head-op">
                    <span>发布</span>
                    <span style="margin-left: 10px;">更多</span>
                </div>
            </div>
            <div class="console-item-content">
                <div class="console-item-content-item">
                    <span>【培训通知】关于转发xxx协会举办2023年xxx行业中、高级职称申报培训的通知</span>
                </div>
                <div class="console-item-content-item">
                    <span>【培训通知】关于加强xxxx业务推进工作培训的通知</span>
                </div>
                <div class="console-item-content-item">
                    <span>【考试】转发关于举办2023年xxxx职业技能竞赛的通知</span>
                </div>
                <div class="console-item-content-item">
                    <span>【考试】关于于2023年xxxx从业人员专业技术能力评价测试时间及有关事项</span>
                </div>
                <div class="console-item-content-item" style="border-bottom: none;">
                    <span>【培训通知】建设工程施工合同解析培训</span>
                </div>
            </div>
        </div>
        <div class="console-item2">
            <div class="console-item-head">
                <span class="console-item-head-title">文化生活</span>
                <div class="console-item-head-op">
                    <span>发布</span>
                    <span style="margin-left: 10px;">更多</span>
                </div>
            </div>
            <div class="console-item-content">
                <div class="console-item-content-item">
                    <span>【党建】树立职业道德 加强廉洁自律</span>
                </div>
                <div class="console-item-content-item">
                    <span>【党建】入党宣誓，庄严神圣表衷心！</span>
                </div>
                <div class="console-item-content-item">
                    <span>【团建】三月女人天 靓丽伊人节</span>
                </div>
                <div class="console-item-content-item">
                    <span>【其他】一生一日 快且乐之</span>
                </div>
                <div class="console-item-content-item" style="border-bottom: none;">
                    <span>【其他】岁月与朝暮同行，十月你好！</span>
                </div>
            </div>
        </div>
        <div class="console-item4">
            <div class="console-item-head">
                <span class="console-item-head-title">工作任务 我的任务/我发送的任务/已完成</span>
                <div class="console-item-head-op">
                    <span>新建任务</span>
                    <span style="margin-left: 10px;">任务统计</span>
                </div>
            </div>
            <div class="console-item-content">
                <table class="layui-table">
                    <colgroup>
                        <col>
                        <col width="150">
                        <col width="120">
                        <col width="120">
                        <col width="120">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>任务名称</th>
                            <th>发送人</th>
                            <th>是否延期</th>
                            <th>完成率</th>
                            <th>结项时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>xxxx项目开发任务</td>
                            <td>张三</td>
                            <td>否</td>
                            <td>100%</td>
                            <td>2023-04-05</td>
                        </tr>
                        <tr>
                            <td>xxxx项目设计任务</td>
                            <td>王五</td>
                            <td>是</td>
                            <td>85%</td>
                            <td>——————</td>
                        </tr>
                        <tr>
                            <td>xxxx项目测试任务</td>
                            <td>李四</td>
                            <td>是</td>
                            <td>75%</td>
                            <td>——————</td>
                        </tr>
                        <tr>
                            <td>xxxx项目需求调研任务</td>
                            <td>赵四</td>
                            <td>否</td>
                            <td>100%</td>
                            <td>2023-06-28</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

<script>
    $(function() {

    })
</script>

</html>